<template>
	<div class="app-container">
		<div class="filter-container">
			<el-input v-model="listQuery.id" placeholder="ID" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
			<el-input v-model="listQuery.username" placeholder="用户名" style="width: 200px;" class="filter-item"
			 @keyup.enter.native="handleFilter" />

			<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
				查询
			</el-button>
			<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
				添加
			</el-button>
			<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
				导出
			</el-button>
		</div>

		<el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;"
		 @sort-change="sortChange">
			<el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
				<template slot-scope="{row}">
					<span>{{ row.id }}</span>
				</template>
			</el-table-column>

			<el-table-column label="用户名" width="110px" align="center">
				<template slot-scope="{row}">
					<span>{{ row.username }}</span>
				</template>
			</el-table-column>

			<el-table-column label="昵称" width="110px" align="center">
				<template slot-scope="{row}">
					<span>{{ row.nickname }}</span>
				</template>
			</el-table-column>

			<el-table-column label="电话号码" width="160px" align="center">
				<template slot-scope="{row}">
					<span>{{ row.phoneNumber }}</span>
				</template>
			</el-table-column>

			<el-table-column label="状态" class-name="status-col" width="80px">
				<template slot-scope="{row}">
					{{row.sex==0?'在线':(row.sex==1?'离线':'无状态')}}
				</template>
			</el-table-column>

			<el-table-column label="创建时间" width="150px" align="center">
				<template slot-scope="{row}">
					<span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
				</template>
			</el-table-column>

			<el-table-column label="性别" width="80px" align="center">
				<template slot-scope="{row}">
					{{row.sex==0?'男':(row.sex==1?'女':'保密')}}
				</template>
			</el-table-column>

			<el-table-column label="生日" width="150px" align="center">
				<template slot-scope="{row}">
					<span>{{ row.birth | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
				</template>
			</el-table-column>

			<el-table-column label="密码" width="290px" align="center">
				<template slot-scope="{row}">
					<span>{{ row.password }}</span>
				</template>
			</el-table-column>

			<el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
				<template slot-scope="{row,$index}">
					<el-button type="primary" size="mini" @click="handleUpdate(row)">
						编辑
					</el-button>
					<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
			<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">

				<el-form-item label="用户名" prop="username">
					<el-input v-model="temp.username" />
				</el-form-item>
				<el-form-item label="昵称">
					<el-input v-model="temp.nickname" />
				</el-form-item>
				<el-form-item label="电话号码">
					<el-input v-model="temp.phoneNumber" />
				</el-form-item>
				<!-- <el-form-item label="状态">
					<el-input v-model="temp.status" />
				</el-form-item> -->

				<el-form-item label="状态">
					<el-select v-model="temp.status" placeholder="请选择状态">
						<el-option label="在线" value="0"></el-option>
						<el-option label="离线" value="1"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="创建时间">
					<el-date-picker v-model="temp.createTime" type="datetime" placeholder="请填写时间" />
				</el-form-item>
				<!-- <el-form-item label="性别">
					<el-input v-model="temp.sex" />
				</el-form-item> -->
				<el-form-item label="性别">
					<el-radio v-model="temp.sex" label="0">男</el-radio>
					<el-radio v-model="temp.sex" label="1">女</el-radio>
				</el-form-item>

				<el-form-item label="生日">
					<el-date-picker v-model="temp.birth" type="datetime" placeholder="请填写时间" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="temp.password" />
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					取消
				</el-button>
				<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
					提交
				</el-button>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
			<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
				<el-table-column prop="key" label="Channel" />
				<el-table-column prop="pv" label="Pv" />
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		fetchList,
		fetchPv,
		createUsermanage,
		updateUsermanage,
		deleteUsermanage
	} from '@/api/usermanage'
	import waves from '@/directive/waves' // waves directive
	import {
		parseTime
	} from '@/utils'
	import Pagination from '@/components/Pagination' // secondary package based on el-pagination

	const calendarTypeOptions = [{
			key: 'CN',
			display_name: 'China'
		},
		{
			key: 'US',
			display_name: 'USA'
		},
		{
			key: 'JP',
			display_name: 'Japan'
		},
		{
			key: 'EU',
			display_name: 'Eurozone'
		}
	]

	// arr to obj, such as { CN : "China", US : "USA" }
	const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
		acc[cur.key] = cur.display_name
		return acc
	}, {})

	export default {
		name: 'ComplexTable',
		components: {
			Pagination
		},
		directives: {
			waves
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			},
			typeFilter(type) {
				return calendarTypeKeyValue[type]
			}
		},
		data() {
			return {
				tableKey: 0,
				list: null,
				total: 0,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 10,
					importance: undefined,
					id: undefined,
					username: undefined,
					sort: '+id'
				},
				importanceOptions: [1, 2, 3],
				calendarTypeOptions,
				sortOptions: [{
					label: 'ID Ascending',
					key: '+id'
				}, {
					label: 'ID Descending',
					key: '-id'
				}],
				statusOptions: ['在线', '离线'],
				showReviewer: false,
				temp: {
					id: '',
					username: '',
					nickname: '',
					avator: '',
					phoneNumber: '',
					status: '',
					createTime: new Date(),
					sex: '',
					birth: '',
					password: ''
				},
				dialogFormVisible: false,
				dialogStatus: '',
				textMap: {
					update: '编辑',
					create: '添加'
				},
				dialogPvVisible: false,
				pvData: [],
				rules: {
					/* type: [{ required: true, message: 'type is required', trigger: 'change' }],
					timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
					title: [{ required: true, message: 'title is required', trigger: 'blur' }] */
					account: [{
						required: true,
						message: '账号不能为空！',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}],
					username: [{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}]
				},
				downloadLoading: false
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				fetchList(this.listQuery).then(response => {
					this.list = response.data.items
					this.total = response.data.total

					// Just to simulate the time of the request
					setTimeout(() => {
						this.listLoading = false
					}, 1.5 * 1000)
				})
			},
			handleFilter() {
				this.listQuery.page = 1
				this.getList()
			},
			handleModifyStatus(row, status) {
				this.$message({
					message: '操作Success',
					type: 'success'
				})
				row.status = status
			},
			sortChange(data) {
				const {
					prop,
					order
				} = data
				if (prop === 'id') {
					this.sortByID(order)
				}
			},
			sortByID(order) {
				if (order === 'ascending') {
					this.listQuery.sort = '+id'
				} else {
					this.listQuery.sort = '-id'
				}
				this.handleFilter()
			},
			resetTemp() {
				this.temp = {
					id: '',
					username: '',
					nickname: '',
					avator: '',
					phoneNumber: '',
					status: '',
					createTime: new Date(),
					sex: '',
					birth: '',
					password: ''
				}
			},
			handleCreate() {
				this.resetTemp()
				this.dialogStatus = 'create'
				this.dialogFormVisible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].clearValidate()
				})
			},
			createData() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						/* this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
						this.temp.author = 'vue-element-admin' */
						createUsermanage(this.temp).then(() => {
							this.list.unshift(this.temp)
							this.dialogFormVisible = false
							this.$notify({
								title: 'Success',
								message: '添加成功',
								type: 'success',
								duration: 2000
							})
						})
					}
				})
			},
			handleUpdate(row) {
				this.temp = Object.assign({}, row) // copy obj
				//this.temp.timestamp = new Date(this.temp.timestamp)
				this.dialogStatus = 'update'
				this.dialogFormVisible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].clearValidate()
				})
			},
			updateData() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						const tempData = Object.assign({}, this.temp)
						//tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
						updateUsermanage(tempData).then(() => {
							const index = this.list.findIndex(v => v.id === this.temp.id)
							this.list.splice(index, 1, this.temp)
							this.dialogFormVisible = false
							this.$notify({
								title: 'Success',
								message: '修改成功！',
								type: 'success',
								duration: 2000
							})
						})
					}
				})
			},
			handleDelete(row, index) {
				const tempData = Object.assign({}, row)
				deleteUsermanage(tempData).then(() => {
					const index = this.list.findIndex(v => v.id === this.temp.id)
					this.list.splice(index, 1, this.temp)
					this.dialogFormVisible = false
					this.$notify({
						title: 'Success',
						message: '删除成功！',
						type: 'success',
						duration: 2000
					})
					this.list.splice(index, 1)
				})

			},
			handleFetchPv(pv) {
				fetchPv(pv).then(response => {
					this.pvData = response.data.pvData
					this.dialogPvVisible = true
				})
			},
			handleDownload() {
				this.downloadLoading = true
				import('@/vendor/Export2Excel').then(excel => {
					const tHeader = ['id', 'username', 'nickname', 'phoneNumber', 'status', 'createTime', 'sex', 'birth', 'password']
					const filterVal = ['id', 'username', 'nickname', 'phoneNumber', 'status', 'createTime', 'sex', 'birth',
						'password'
					]
					const data = this.formatJson(filterVal)
					excel.export_json_to_excel({
						header: tHeader,
						data,
						filename: 'table-list'
					})
					this.downloadLoading = false
				})
			},
			formatJson(filterVal) {
				return this.list.map(v => filterVal.map(j => {
					if (j === 'timestamp') {
						return parseTime(v[j])
					} else {
						return v[j]
					}
				}))
			},
			getSortClass: function(key) {
				const sort = this.listQuery.sort
				return sort === `+${key}` ? 'ascending' : 'descending'
			}
		}
	}
</script>
